<template>
  <view class="start-index">
    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <home ref="home"></home>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <circle-page ref="circleRef"></circle-page>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <activity ref="activity"></activity>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <preferred ref="preferredRef"></preferred>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <mine ref="mine"></mine>
      </scroll-view>
    </view>
    
    <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#838383"
      inactiveColor="#AAAAAA"
      activeIconColor="#ffffff"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar>
  </view>
</template>

<script>
  import Home from './home/home.vue'
  import CirclePage from './circle/circle.vue'
  import Preferred from './preferred/preferred.vue'
  import Mine from './mine/mine.vue'
  import Activity from './activity/activity.vue'
  
  export default {
    components: {
      Home,
      CirclePage,
      Preferred,
      Mine,
	  Activity
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '服务',
            activeIcon: '/static/tabbar/发现-ch.png',
            inactiveIcon: '/static/tabbar/发现1.png'
          },
          {
            title: '捐款',
            activeIcon: '/static/tabbar/捐款-ch.png',
            inactiveIcon: '/static/tabbar/捐款.png'
          },
          {
            title: '吉农科',
            activeIcon: '/static/tabbar/navlogo.png',
            inactiveIcon: '/static/tabbar/navlogo.png',
            activeIconColor: '#FFFFFF',
            inactiveIconColor: '#FFFFFF',
            iconSize: 65,
            out: true
          },
          {
            title: '活动',
            activeIcon: '/static/tabbar/活动-ch.png',
            inactiveIcon: '/static/tabbar/活动.png',
          },
          {
            title: '我的',
            activeIcon: '/static/tabbar/我的-ch.png',
            inactiveIcon: '/static/tabbar/我的.png'
          }
        ],
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: [],
        // 用于暂存从URL参数获取的用户信息
        globalUserInfo: null
      }
    },
    onLoad(options) {
      let index = 0;
      
      
      // 检查是否是从登录页面跳转过来的
      if (options.fromLogin === 'true') {
        console.log('检测到fromLogin=true，准备切换到mine页面');
        index = 4; // mine页面的索引是4
        
        // 如果URL中包含userInfo参数，解析并保存
        if (options.userInfo) {
          try {
            const userInfo = JSON.parse(decodeURIComponent(options.userInfo));
            console.log('从URL参数中获取到用户信息:', userInfo);
            // 保存到全局变量或本地存储，供mine页面使用
            this.globalUserInfo = userInfo;
            // 同时更新本地存储，确保mine页面可以获取到
            uni.setStorageSync('userInfo', userInfo);
          } catch (e) {
            console.error('解析用户信息参数失败:', e);
          }
        }
      } else if (options.target === '4') {
        console.log('检测到target=4，准备切换到mine页面');
        index = 4;
      } else {
        index = Number(options.index || 0);
      }
      
      // 先设置标志位
      this.tabberPageLoadFlag = this.tabbarList.map((item, i) => i === index);
    
      // 关键：等 Vue 完成 DOM 更新后再设置 currentIndex
      this.$nextTick(() => {
        this.currentIndex = index; // 直接赋值，让 tn-tabbar 响应
        // 如果 switchTabbar 有额外逻辑（如 stop video），也可以调用
        this.switchTabbar(index);
        
        // 如果是跳转到mine页面且有全局用户信息，直接调用mine组件的方法更新
        if (index === 4 && this.globalUserInfo) {
          // 简化调用，避免不必要的日志
          // 等待mine组件挂载完成后调用其方法，但增加延迟以确保组件完全挂载
          setTimeout(() => {
            if (this.$refs.mine && typeof this.$refs.mine.updateUserInfo === 'function') {
              // 直接传递用户信息，避免组件内部重复从存储获取
              this.$refs.mine.updateUserInfo(this.globalUserInfo);
              // 传递后清空全局用户信息，避免重复传递
              this.globalUserInfo = null;
            }
          }, 100); // 增加延迟确保组件完全挂载
        }
      });
    },
    methods: {
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
        if (index !== 2) {
          this.$refs?.circleRef?.stopAllVideo()
        }
      },
      
      
      // 导航页面滚动到底部
      tabbarPageScrollLower(e) {
        if (this.currentIndex === 3) {
          this.$refs.preferredRef.getRandomData && this.$refs.preferredRef.getRandomData()
        }
      },
      
      // 切换导航页面
      _switchTabbarPage(index) {
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
